<template>
<div>
    <el-drawer :append-to-body="true" title="抄送人设置" v-model="store.state.form.copyerDrawer" direction="rtl" size="550px" > 
        <div class="demo-drawer__content">
            <el-dropdown>
                <el-button type="primary">
                  添加成员<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleClick('A')">指定成员</el-dropdown-item>
                    <el-dropdown-item @click="handleClick('B')">表单内的联系人</el-dropdown-item>
                    <el-dropdown-item @click="handleClick('C')">负责人</el-dropdown-item>
                    <el-dropdown-item @click="handleClick('D')">主管理员</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
            </el-dropdown>
             <div class="top">
                <el-button v-if="formData.configuration===1" type="success" @click="addMembers">添加成员</el-button>
                <el-select v-if="formData.configuration===2" v-model="formData.tagsid" class="m-2" placeholder="请选择主表字段">
                    <el-option
                        v-for="item in tableData"
                        :key="item.fieldID"
                        :label="item.fieldDispName"
                        :value="item.optionvalue"
                    />
                </el-select>
            </div>
            <div class="top" v-if="formData.tags">
                <el-tag v-for="tag in formData.tags" :key="tag.name" class="mx-1" closable @close="handleClose(tag)">{{ tag.name }}</el-tag><span class="empty" @click="empty" v-if="formData.tags.length!=0">清空</span>
            </div>
           <el-checkbox v-model="formData.permission" label="允许发起人添加抄送人" size="large" />
        </div>
        <el-dialog v-model="dialogVisible" :title="'选定成员'" width="470" :before-close="()=>{dialogVisible=false}">
            <emplteedog @submitsxm="saveMembers" @sxdown="(val)=>{dialogVisible=val}"></emplteedog>
        </el-dialog>
        <div class="demo-drawer__footer clear"  style="margin-left:10px ;">
            <el-button type="primary" @click="saveCopyer">确 定</el-button>
            <el-button @click="closeDrawer">取 消</el-button>
        </div>
    </el-drawer>
</div>
</template>
<script>
import { computed, ref, watch,onBeforeMount,reactive,toRefs} from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
 import { useStore } from '/@/store/index';
 import {getUserList} from '/@/api/system/user/index';
 import XEUtils from 'xe-utils'
 import emplteedog from "../dialog/employeesDialog.vue"
export default {
   props:['tabDatasxm'],
    components:{
            emplteedog
        },
    setup(props){
        let store = useStore()
        let state = reactive({
            formData:{
                configuration:'1',
                permission:false,
                tags:[],
                tagsid:[]
            }
        })
        let formData = ref({
            
        })
        watch(()=>{return store.state.form.copyerConfig1},(val)=>{
            state.formData=val.value
         // state.formData.tagsid=XEUtils.toJSONString(state.formData.tagsid)
        },{deep:true})
        let dialogVisible=ref(false)
        let tableData=ref([])
        let specifiedMembert=ref([])
        const addMembers=()=>{
            dialogVisible.value=true
            getUserList({pageNum: 1,pageSize: 10}).then((res)=>{
                tableData.value=res.data.userList
            })
        }
        const handleClick = (str) => {
            switch(str){
                case 'A':
                    console.log("A");
                    state.formData.configuration=1
                  state.formData.tags=[]
                    break;
                case 'B':
                  console.log(props.tabDatasxm)
                    state.formData.configuration=2
                  state.formData.tags=[]
                  tableData.value=  props.tabDatasxm.find(item=>item.tableType===0).Fields.map(row=>{
                    row.optionvalue={"label":row.fieldDispName,"value":row.fieldName}
                    return row
                  })
                  break;
                case 'C':
                    state.formData.configuration=3
                    state.formData.tags=[]
                    state.formData.tags.push({name:"负责人"})
                    console.log("C");
                    break;
                case 'D':
                    state.formData.configuration=4
                    state.formData.tags=[]
                    state.formData.tags.push({name:"主管理员"})
                    console.log("D");
                    break;
            }
        }
        let tablemember = ref(null)
        const memberList = ({row})=>{
            if(!XEUtils.includes(specifiedMembert.value, row)){
                specifiedMembert.value.push(row)
            }
            tablemember.value.loadData(specifiedMembert.value)
        }
        const removemember = ({row})=>{
            specifiedMembert.value.forEach((res,index)=>{
                if(res===row){
                    specifiedMembert.value.splice(index,1)
                }
            })
            tablemember.value.loadData(specifiedMembert.value)
        }
        const saveMembers = (val,arr)=>{
            state.formData.tags=arr
            dialogVisible.value=val
        }
        const handleClose=(tag)=>{
            state.formData.tags.forEach((res,index)=>{
                if(res===tag){
                    state.formData.tags.splice(index,1)
                }
            })
        }
        const empty = ()=>{
            state.formData.tags=[]
        }
        const closeDrawer= ()=>{
            store.commit('updateCopyer', false)
        } 
        const saveCopyer =()=>{

            store.commit('updateCopyerConfig', {
                value:state.formData,
                flag:true,
                id:state.formData.id
            })
            closeDrawer()
        }
        return {
            ...toRefs(state),
            store,
            dialogVisible,
            tableData,
            specifiedMembert,
            handleClick,
            addMembers,
            memberList,
            tablemember,
            removemember,
            saveMembers,
            handleClose,
            empty,
            closeDrawer,
            saveCopyer
        }
    }
}
</script>

<style lang="scss">
.demo-drawer__content{
    padding: 10px;
}
.S-button{
    display: flex;
    justify-content: center;
    background-color: #3296fa;
    color: #fff;
    position: relative;
    width: 120px;
    height: 40px;
    border-radius: 5px;
    line-height: 40px;
    font-size: 15px;
    cursor: pointer;
}
.triangle{
    display: inline-block;
    margin-left: 10px;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    position: relative;
    top: 18px;
}
.xuan{
    position: relative;
    top: 12px;
    transform:rotate(180deg);
}
.dow{
    position: absolute;
    top: 40px;
    left: 0;
    width: 130px;
    height: 0px;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    transition: all .3s;
    z-index: 9999;
    p{
        color: #000;
        line-height: 30px;
        font-size: 14px;
        padding: 5px 10px;
    }
    p:hover{
        background-color: rgb(179, 179, 179);
    }
    .hui{
        background-color: rgb(255, 255, 255);
        color: rgba(0, 0, 0, 0.479);
        cursor:not-allowed;
    }
}
.yun{
    box-shadow: 0 5px 5px rgb(197, 192, 192);
    height: 160px;
}
.top{
    margin: 8px 0 5px 0;
}
.mx-1{
    margin-right: 5px;
}
.empty{
    color: #3296fa;
}

</style>